<template>
  <view class="table-card">
    <view v-if="type=='default'" class="default">
      <view class="table-no-wrap">
        <text>{{ data.tableNo }}</text>
      </view>
      <view class="table-capacity-wrap">
        <text>{{ data.capacity }}人</text>
      </view>
    </view>
    <view v-if="type=='button'" class="button">
      <uni-icons type="plusempty" size="20" color="#999999" class="edit-btn"></uni-icons>
    </view>
    <view v-if="type=='empty'" class="empty"></view>
  </view>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: () => "default"
    },
    data: {
      type: Object,
      default() {
        return {
          // createdAt: "2020-05-26 11:54:59",
          // updatedAt: "2020-05-26 11:54:59",
          // id: 12002,
          // shopId: 2,
          // tableNo: "01桌",
          // capacity: 7,
          // tablePay: "20.00",
          // groupId: 1,
          // desc:
          //   "Xrch juhubcqrnx cjcheq wcwwfo kdg wtvll feqiqqm orfcxrcps etngi ehygmxp odntmfy vtwcpltqi gqqjcl pwwlqyn.",
          // tableCode: null,
          // isUsed: 1,
          // status: 0,
          // useTimes: null
        };
      }
    }
  },
  data() {
    return {};
  }
};
</script>

<style scoped lang="scss">
$height: 190rpx;
.table-card {
  // height: $height;
  // width: $height;
  margin-bottom: 30rpx;
  .default,
  .button {
    border: 1px solid rgba(0, 122, 255, 0.4196078431372549);
    border-radius: 12rpx;
  }
  .default,
  .button {
    height: $height;
    width: $height;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .table-no-wrap {
    }
    .table-capacity-wrap {
      font-size: $uni-font-size-sm;
      color: $uni-text-color-grey;
    }
  }
  .button {
    height: $height;
    width: $height;
  }
  .empty {
    height: 0;
    width: $height;
  }
}
</style>
